<template>
  <div>
    <Calendar
      :months="months"
      @next="next"
      @prev="prev"
      :lunar="false"
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
      :tileContent="tileContent"
      :almanacs="almanacs"
    />
    <button @click="setToday">返回今日</button>
    <!-- <button @click="dateInfo">日期信息</button> -->
    <!-- <button @click="renderer">重新渲染年月日期</button> -->
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/style.css'
// import arrowLeft from '../assets/arrowLeft.png' //使用自定义箭头图片

export default {
  data () {
    return {
      months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      disabledArray: ['2018-6-27','2018-6-25'],
      value: [2018,6,7],
      begin:[2016,1,1],
      end:[2020,1,1],
      events: {'2019-11-28':'今日备注', '2018-6-8':'一条很长的明日备注'},
      almanacs: {'9-3': '抗战胜利日', '11-17': '学生日'},
      tileContent: [
          {date: '2018-6-8', className: 'holiday', content: '钢'},
      ],
      // arrowLeft: arrowLeft
    }
  },
  components: {
    Calendar
  },
  props:{
    project_id:{
      default:0
    },
  },
  methods: {
    prev(year, month, weekIndex) {
      //上月
      // console.log(year, month, weekIndex)
      this.month=month;
      this.sendDate({year,month})
      this.getRemark( {year,month})
    },
    next(year, month, weekIndex) {
      //下月
      // console.log(year, month, weekIndex)
      this.month=month;
      this.sendDate({year,month})
      this.getRemark( {year,month})
    },
    selectYear(year) {
      //选择年份
      // console.log(year)
      this.sendDate({year,month:this.month})
      this.getRemark( {year,month:this.month})
    },
    selectMonth(month, year) {
      //选择月份
      this.month=month;
      // console.log(year, month)
      this.sendDate({year,month})
      this.getRemark( {year,month})
    },
    setToday() {
      this.$refs.calendar.setToday()
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo()
      console.log(info);
    },
    renderer() {
       (2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      if(val2.content=='.'){
        this.$emit('select',val2);
      }
      
      // console.log(val)
      // console.log(val2)
    },
    async getRemark({year,month}){
      //获取标记
      let params={
        user_token:wx.getStorageSync('userToken'),
        year,
        month,
        project_id:this.project_id
      }
      let res=await this.$request.getData('/ucenter/getRecordDays',params,{show:false});

      //去重,删除日期前的04的0;
      let pattern=/^[0]?/
      let arr=[];
      if(res.data.level=='success'){
        arr=[...new Set(res.data.data)];
      }
      
      //遍历标记数组
      let tileContent=arr.map(item=>{
        let obj={};
        let day=item.replace(pattern,"");
        
        obj.date=`${year}-${month}-${day}`;
        obj.className='holiday';
        obj.content='.'
        return obj
      })
      this.tileContent=tileContent;

    },
    initMonth(month){
      //父组件初始化月份
      this.month=month;
    },
    sendDate({month,year}){
      //告知父组件，显示的月份
      this.$emit('getDate',{month,year})
    }
  },
  mounted() {

  },
}
</script>
<style >
  .holiday .slot-element{
    top:-25rpx;
    right: 0;
    font-weight: 600;
    font-size: 50rpx;
    color:red !important;
  }
</style>